<template>
  <div>
    <mt-popup
      v-model="visible"
      closeOnClickModal=false
      position="bottom">
      <div class="container">
        <div class="title"><span v-text="title"></span></div>
        <div class="divider"></div>
        <div>
          <div class="row" style="margin-top: 10px">
            <div class="cell">
              <div class="cell-inner" v-if="items[0].text" @click="handleClick('r1c1')">123</div>
            </div>
            <div class="cell">
              <div class="cell-inner">123</div>
            </div>
            <div class="cell">
              <div class="cell-inner">123</div>
            </div>
          </div>
          <div class="row" style="margin-top: 5px;margin-bottom: 10px">
            <div class="cell">
              <div class="cell-inner">123</div>
            </div>
            <div class="cell">
              <div class="cell-inner">123</div>
            </div>
            <div class="cell">
              <div class="cell-inner">123</div>
            </div>
          </div>
        </div>
        <div class="space" style="height: 5px"></div>
        <div class="footer" @click="dismiss"><span>cancel</span></div>
      </div>
    </mt-popup>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    /** kebab-case */
    name: 'bottom-sheet',

    data() {
      return {
        title: this.sheetTitle,
        visible: true,
        items: this.sheetItems
      };
    },
    props: {
      sheetTitle: {
        type: String
      },
      sheetItems: {
        type: [],
        required: true,
        default: []
      },
      sheetVisible: {
        type: Boolean,
        required: true,
        default: true
      }
    },
    components: {},
    methods: {
      dismiss() {
        this.visible = false;
      },
      handleClick(which) {
        this.$emit(which);
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .container
    flex-y()
    background-color #fafafa

  .title
    height cell-height
    flex-center()

  .row
    display flex
    flex-direction row
    justify-content space-around
    align-items center
    width 100vw

  .cell
    flex-center()
    height 16vw
    width 30vw

  .cell-inner
    flex-center()
    width 100%
    height 100%
    border-radius 5px
    background-color white
    word-vw(14, second-ash)

  .cell-inner-primary
    color white
    background-color main-color

  .footer
    height cell-height
    flex-center()
</style>
